<template>
  <div>
    <TypeNav/>
    <!--list-content-->
    <div class="main">
      <div class="py-container">
        <SearchTag
            :trademark="searchParams.trademark"
            :searchProps="searchParams.props"
            @deleteQueryTag="deleteQueryTag"
            @deleteParamsTag="deleteParamsTag"
            @deleteTrademark="deleteTrademark"
            @deleteAttr="deleteAttr"
        />
        <SearchSelector
            @trademarkParams="trademarkParams"
            @attrvalueParams="attrvalueParams"
        />
        <SearchDetails
            @searchListSort="searchListSort"
            :pageNo="searchParams.pageNo"
            @changePageNo="changePageNo"
        />
        <SearchHot/>
      </div>
    </div>
  </div>
</template>

<script>
import {mapActions} from 'vuex';
import SearchTag from './components/SearchTag';
import SearchSelector from './components/SearchSelector';
import SearchDetails from './components/SearchDetails';
import SearchHot from './components/SearchHot';

export default {
  name: 'Search',
  components: {
    SearchTag,
    SearchSelector,
    SearchDetails,
    SearchHot,
  },
  data() {
    return {
      //其实在search页中,最后的目的就是为发请求得到分页列表,并且发送请求的逻辑已经书写完毕
      //我们在搜索页的所有操作其实都是修改发分页请求时的参数,然后再次发请求!!!
      //定义一个请求的params参数
      searchParams: {
        category1Id: '',
        category2Id: '',
        category3Id: '',
        categoryName: '',
        keyword: '',
        order: '',
        pageNo: 1,
        pageSize: 10,
        props: [],
        trademark: '',
      },
    };
  },
  beforeMount() {
    //因为进入搜索页只有两个场景 1. 点击三级分类   2.点击搜索按钮
    //所以初始化请求的时候 一定有params或者query参数
    //我们要在search发送初始化请求之前,先把params或者query参数放在searchParams参数中
    this.initParams();
  },
  mounted() {
    //初始化的时候就发送请求
    this.getSearchList(this.searchParams);
  },
  methods: {
    //1.发送搜索分类列表数据的请求
    ...mapActions('search', ['getSearchList']),

    //2.初始化请求之前的参数处理函数
    initParams() {
      //获取所有的参数
      const {
        categoryName = '',
        category1Id = '',
        category2Id = '',
        category3Id = '',
      } = this.$route.query;
      const {searchKey = ''} = this.$route.params;

      //合并参数
      this.searchParams = {
        ...this.searchParams,
        categoryName,
        category1Id,
        category2Id,
        category3Id,
        keyword: searchKey,
      };
    },

    //3.接收品牌传递过来值的 自定义事件回调函数
    trademarkParams(tm) {
      // console.log(tm);
      //接收到品牌点击的传值之后,给searchParams传值
      this.searchParams.trademark = `${ tm.tmId }:${ tm.tmName }`;
      //重新发送请求
      this.getSearchList(this.searchParams);
    },

    //4.接收属性点击传递值 自定义事件回调函数
    attrvalueParams(attr) {
      // console.log(attrValue);
      const {attrId, attrName, attrValue} = attr;
      const str = `${ attrId }:${ attrValue }:${ attrName }`;
      if (this.searchParams.props.includes(str)) return;
      //接收到当前属性的信息之后,给searchParams传值
      this.searchParams.props.push(`${ attrId }:${ attrValue }:${ attrName }`);
      //重新发送请求
      this.getSearchList(this.searchParams);
    },

    //5. 删除querytag标记的 自定义事件回调
    deleteQueryTag() {
      this.searchParams = {
        ...this.searchParams,
        category1Id: '',
        category2Id: '',
        category3Id: '',
        categoryName: '',
      };

      const params = this.$route.params;
      //重新发送请求
      // this.getSearchList(this.searchParams);
      this.$router.push({
        name: 'search',
        params,
      });
    },

    //6. 删除paramsTag标记的 自定义事件回调
    deleteParamsTag() {
      this.searchParams = {
        ...this.searchParams,
        keyword: '',
      };
      const query = this.$route.query;

      //通知Header组件清空搜索框的值
      this.$bus.$emit('notifyHeader');

      //重新发送请求
      this.$router.push({
        name: 'search',
        query,
      });
    },

    //7. 删除品牌tag的 自定义事件回调
    deleteTrademark() {
      //请求参数
      this.searchParams = {
        ...this.searchParams,
        trademark: '',
      };
      //重新发送请求
      this.getSearchList(this.searchParams);
    },

    //8.删除 属性的tag的 自定义事件回调
    deleteAttr(tag) {
      //处理参数
      this.searchParams.props = this.searchParams.props.filter(
          (item) => tag != item,
      );
      //重新发送请求
      this.getSearchList(this.searchParams);
    },
    //9.排序 自定义事件回调
    searchListSort(order) {
      this.searchParams.order = order;
      //重新发送请求
      this.getSearchList(this.searchParams);
    },

    //10. 点击页码翻页的 自定义事件回调函数
    changePageNo(page) {
      this.searchParams.pageNo = page;
      //重新发送请求
      this.getSearchList(this.searchParams);
    },
  },
  watch: {
    $route() {
      //只要再次点击了三级分类和搜索按钮,我们要先改变searchParams参数,然后再重新发送请求
      this.initParams();
      this.getSearchList(this.searchParams);
    },
  },
};
</script>

<style scoped lang="less">
.main {
  margin: 10px 0;

  .py-container {
    width: 1200px;
    margin: 0 auto;
  }
}
</style>
